<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <title>2023年中职技能竞赛 聊城、德州、滨州、东营四市联赛 “婴幼儿保育”赛项</title>
    <meta name="keywords" content="2023年中职技能竞赛 聊城、德州、滨州、东营四市联赛 “婴幼儿保育”赛项">
    <meta name="description" content="2023年中职技能竞赛 聊城、德州、滨州、东营四市联赛 “婴幼儿保育”赛项">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/login.css" rel="stylesheet">
    <link rel="shortcut icon" href="bitbug_favicon.ico">
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html"/>
    <![endif]-->
    <script>
        if (window.top !== window.self) {
            window.top.location = window.location;
        }
    </script>

</head>
<style>
    #layui-layer-shade2{z-index: 19891013 !important;}

    .signinpanel {
        margin: 0 0;
        width: 100%;
        height: 100%;
    }
    .signinpanel .row{
        display: flex;
        width: 100%;
        height: 100%;
        margin: 0 !important;
    }
    .signinpanel .row #left-bg{
        width: 50%;
    }
    .signinpanel .row #left-bg img{
        width: 100%;
        height: 100%;
    }
    .signinpanel form {
        padding: 0;
        color: #FFFFFF;
        text-align: center;
        box-shadow: none;
    }
    .loginbg {
        position: relative;
        background-image: url("../../../img/indexlogin1.png") ;
        background-size: 100% 100%;
    }
    .submitbg{
        position: absolute;
        right: 20%;
        top: 20%;
        display: flex;
        justify-content: center;
        width: 400px;
        height: 476px;
        padding: 64px 50px;
        background: #FFFFFF;
        box-shadow: 0px 3px 12px 1px rgba(86,0,5,0.16);
        border-radius: 4px 4px 4px 4px;
        /*background: url("../../../img/loginindexbg.png") no-repeat;*/
        /*background-size: 100% 100%;*/
    }
    .submitbg #signupForm {
        width: 100%;
        border: 0;
        background: none;
    }
    .btn {
        /*background: url("../../../img/loginBtn.png") no-repeat !important;*/
        /*background-size: 100% 100% !important;*/
        border: 0;
        font-size: 18px;
        height: 48px;
        background: linear-gradient(180deg, #2C82EB 0%, #7DB7FF 100%);
        border-radius: 4px 4px 4px 4px;
    }
    .btn-login:hover,.btn-login:active,.btn-login:focus {
        color: #fff;
        background: linear-gradient(180deg, #2C82EB 0%, #7DB7FF 100%);
        border: none;
        border-radius: 4px 4px 4px 4px;
    }
   .signinpanel .form-control {
        border: 1px solid #C8CFE2 !important;
        margin-top: 0;
        margin-bottom: 24px;
    }
    .signinpanel .btn{
        margin-top: 72px;
    }
    .btn-login:hover,.btn-login:focus,.btn:active:focus, .btn:focus{
        border: none;
        outline: none;
    }
    .btn:active{
        box-shadow: none;
    }
    #username-error{
        padding-top: 10px;
    }
    label.error{
        color: #F80000;
    }
    #signupForm label{
        text-align: left;
        display: block;
        font-weight: normal;
    }
    .title{
        font-size: 24px;
        color: #2C82EB;
        margin-bottom: 64px;
        padding-bottom: 8px;
        position: relative;
    }
    .title:after{
        content: '';
        position: absolute;
        width: 38px;
        height: 4px;
        background: #2C82EB;
        left: 50%;
        margin-left: -19px;
        bottom: 0;
    }
</style>

<body>
<div class="signinpanel">
    <div class="row">

        <div style="width: 100%;" class="loginbg">
            <img src="../../../img/logintile1.png" style="width: 42%;margin-top: 118px;margin-left: 127px">
            <div class="submitbg">
                <form id="signupForm">
                    <div class="title">用户登录</div>
                    <input type="text" name="username" placeholder="请输入用户名" class="form-control uname" style="padding: 22px 20px"/>
                    <input type="password" name="password" placeholder="请输入密码" class="form-control pword m-b" style="padding: 22px 20px"/>
                    <button class="btn btn-login btn-block">登 录</button>

                </form>
            </div>
        </div>
    </div>
</div>
<script th:inline="javascript"> var ctx = [[@{/}]] ; </script>
<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4" th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
<script src="/js/bootstrap.min.js?v=3.3.6" th:src="@{/js/bootstrap.min.js?v=3.3.6}"></script>

<!-- 自定义js -->
<script src="/js/content.js?v=1.0.0" th:src="@{/js/content.js?v=1.0.0}"></script>

<!-- jQuery Validation plugin javascript-->
<script src="/js/plugins/validate/jquery.validate.min.js" th:src="@{/js/plugins/validate/jquery.validate.min.js}"></script>
<script src="/js/plugins/validate/messages_zh.min.js" th:src="@{/js/plugins/validate/messages_zh.min.js}"></script>
<script src="/js/plugins/layer/layer.min.js" th:src="@{/js/plugins/layer/layer.min.js}"></script>
<script type="text/javascript">
    //回车登录
    document.onkeydown =cdk;
    function cdk(){
        if(event.keyCode ==13){
            login();
        }
    }
    $(document).ready(function () {

        console.log(ctx);
        validateRule();

    });

    $.validator.setDefaults({
        submitHandler: function () {
            login();
        }
    });

    function login4qq() {
       alert('QQ登录完善中')
       return false;
    }
    function login4wechat() {
       alert('微信登录完善中')
       return false;
    }
    function login() {
        $.ajax({
            type: "POST",
            url: ctx+"login",
            data: $('#signupForm').serialize(),
            success: function (r) {
                if (r.code == 0) {
                    if (r.data == null){
                        parent.location.href = '/index';
                    }else {
                        var list = r.data;
                        var opt = '<option value="">请选择机构</option>';
                        for (var i = 0; i < list.length; i++) {
                            opt += '<option value="' + list[i].id + '">' + list[i].name + '</option>'
                        }
                        $("#org").html(opt);
                        layer.open({
                            title: '请选择机构',
                            type: 1,
                            area: ['280px', '250px'],
                            fixed: false, //不固定
                            btn:['确定' , '取消'],
                            // shadeClose:false,
                            maxmin: true,
                            content: $("#lookView"),
                            yes: function () {
                                var orgId = $("#org").val();
                                if (orgId != ""){
                                    $.ajax({
                                        type:'POST',
                                        data:{orgId:orgId},
                                        url:ctx+"org",
                                        success: function (r) {
                                            if (r.code == 0){
                                                parent.location.href = '/index';
                                            }else {
                                                layer.msg(r.msg);
                                            }
                                        }
                                    })
                                }else {
                                    layer.msg("请选择机构")
                                }
                            },
                            success: function () {


                            }
                        });

                    }
                } else if (r.code = 40400) {
                    layer.msg(r.msg);
                }else{
                    layer.msg(r.msg);
                }
            }
        });
    }

    function validateRule() {
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#signupForm").validate({
            rules: {
                username: {
                    required: true
                },
                password: {
                    required: true
                }
            },
            messages: {
                username: {
                    required: icon + "请输入您的用户名",
                },
                password: {
                    required: icon + "请输入您的密码",
                }
            }
        })
    }
</script>

</body>


</html>
